<template>
  <div>
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" :label-width="labelWidth" class="demo-ruleForm">
      <div v-for="(item, index) in formData.ttsiteInspectionRecordPhotosList" :key="item.id" class="image_box">
        <el-button link :loading="loading" type="primary" class="btn" @click="handleViewImg(item)">预览</el-button>
        <el-button link type="danger" :disabled="disabled" class="btn" @click="handleDel(index)">删除</el-button>
        <el-form-item
          label="标题"
          :rules="rules.groupName"
          :prop="`ttsiteInspectionRecordPhotosList.${index}.groupName`">
          <el-input
            v-model="formData.ttsiteInspectionRecordPhotosList[index].groupName"
            style="width: 18vw"
            :disabled="disabled"
            placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item
          label="拍摄时间"
          :rules="rules.photoTime"
          :prop="`ttsiteInspectionRecordPhotosList.${index}.photoTime`">
          <el-date-picker
            v-model="formData.ttsiteInspectionRecordPhotosList[index].photoTime"
            type="datetime"
            placeholder="请选择时间"
            :disabled="disabled"
            :value-format="'YYYY-MM-DD HH:mm:ss'"
            style="width: 18vw" />
        </el-form-item>
        <el-form-item
          label="拍摄地点"
          :rules="rules.address"
          :prop="`ttsiteInspectionRecordPhotosList.${index}.address`">
          <locationSelect
            v-model="formData.ttsiteInspectionRecordPhotosList[index].address"
            :disabled="disabled"
            style="width: 80%" />
        </el-form-item>
        <el-form-item
          label="证明对象"
          :rules="rules.evidenceTarget"
          :prop="`ttsiteInspectionRecordPhotosList.${index}.evidenceTarget`">
          <el-input
            v-model="formData.ttsiteInspectionRecordPhotosList[index].evidenceTarget"
            :disabled="disabled"
            type="textarea"
            :rows="4"
            placeholder="请输入证明对象"></el-input>
        </el-form-item>
        <el-form-item label="上传照片" :rules="rules.photos" :prop="`ttsiteInspectionRecordPhotosList.${index}.photos`">
          <imageUpload v-model="formData.ttsiteInspectionRecordPhotosList[index].photos" :disabled="disabled" />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import locationSelect from '@/components/locationSelect/index.vue'
import { onSiteInspectionPreviewPdf } from '@/api/system/file.js'
import { ElMessage } from 'element-plus'

const props = defineProps({
  id: {
    type: [String, Number],
    default: '',
  },
  formData: {
    type: Object,
    required: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const ruleFormRef = ref()
const labelWidth = '120px'

// 预览现场检查照片文书
const loading = ref(false)
const handleViewImg = (item: any) => {
  loading.value = true
  validateForm()
    .then(async () => {
      const params = {
        ...item,
        ...item.address,
      }
      const res: any = await onSiteInspectionPreviewPdf(params)
      if (!!res.msg) {
        window.open(res.msg)
      } else {
        ElMessage.warning('预览文件不存在')
      }
      loading.value = false
    })
    .catch(() => {
      ElMessage.warning('请先完善照片组信息')
      loading.value = false
      return
    })
}
// 删除照片组
const handleDel = (index: number) => {
  props.formData.ttsiteInspectionRecordPhotosList.splice(index, 1)
}

// 自定义校验器：检查拍摄地点是否完整
const validateLocation = (rule: any, value: any, callback: any) => {
  if (!value || !value.streetOfPhotoLocation || !value.photoLocation) {
    callback(new Error('请选择拍摄地点'))
  } else {
    callback()
  }
}

const validateLocation2 = (rule: any, value: any, callback: any) => {
  if (!value || (Array.isArray(value) && value.length === 0)) {
    callback(new Error('请上传照片'))
  } else {
    callback()
  }
}

const rules = ref<any>({
  groupName: [{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }],
  evidenceTarget: [{ required: true, message: '请输入证明对象', trigger: ['blur', 'change'] }],
  photoTime: [{ required: true, message: '请选择拍摄时间', trigger: ['blur', 'change'] }],
  address: [{ required: true, validator: validateLocation, trigger: ['blur', 'change'] }],
  photos: [{ required: true, validator: validateLocation2, trigger: ['blur', 'change'] }],
})

// 表单验证方法
const validateForm = () => {
  return new Promise((resolve, reject) => {
    resolve(ruleFormRef.value?.validate())
  })
}

defineExpose({
  validateForm,
})
</script>

<style scoped lang="scss">
.image_box {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
.btn {
  float: right;
  margin: 0 10px;
}
</style>
